<script>
import {Star} from "@element-plus/icons-vue";
import {useRouter} from "vue-router"
export default {
  components: {Star},
  data(){
    return{
      router:useRouter(),
      goods_name:"请输入商品名称",
      articles: [],
      selectedArticle: null,
      goods_item:[],
      categories:[]
    }
  },
  methods:{
    LoadCategoryData(){
      this.$http.get("http://localhost:8080/category/all").then((res)=>{
        this.categories = res.data
        console.log(this.categories);
      }).catch(function(err){
        console.log(err);
      })
    },
    LoadArticleData(){
      this.$http.get("http://localhost:8080/notice/random").then((res)=>{
        this.articles = res.data
        console.log(this.articles);
      }).catch(function(err){
        console.log(err);
      })
    },
    LoadGoodsData(){
      this.$http.get("http://localhost:8080/goods/index").then((res)=>{
        this.goods_item = res.data
        console.log(this.goods_item);
      }).catch(function(err){
        console.log(err);
      })
    },
  },
  mounted(){
    this.LoadCategoryData();
    this.LoadArticleData();
    this.LoadGoodsData();
  }
}
</script>

<template>
  <div class="search-box-right">
    <el-input
        v-model="goods_name"
        style="width:300px"
        size="default"
        placeholder="请输入商品名称"
        clearable
    />
    &nbsp;&nbsp;
    <router-link :to="{name:'Goods_search',params:{goodsName:goods_name} }">
    <el-button type="primary" round >搜索</el-button>
    </router-link>
  </div>
  <div class="common-layout">
      <el-main>
        <el-row style="height: 300px">
          <!-- 展示随机的九种商品类别 -->
          <el-col :span="8" style="display: grid; grid-template-columns: repeat(3, 1fr);height: 300px;">
                  <div v-for="category in categories" :key="category.category_id">
                    <div class="category-item">
                      <router-link :to="{name:'GoodsIp',params:{categoryId:category.category_id} }">
                        <img :src="'http://localhost:8080/image/upload/' + category.category_image" style="width: 70%; height: 70%;" >
                      </router-link>
                      <br>{{ category.category_name }}

                    </div>
                    </div>
          </el-col>
          <!-- 展示我们的Logo-->
          <el-col :span="8" style="height: 300px;">
            <div>
            <img style="height: 280px;width: 420px"
                src="http://localhost:8080/image/upload/1718597558435.png" alt="图片描述" />
  </div>
          </el-col>

          <!-- 展示随机的九篇文章主题 -->
          <el-col :span="8" style="height: 300px;">
            <div class="article">
              <div style="font-size: 22px;animation: fadeIn 2s ease-in-out;">
                <el-icon><Star /></el-icon>
                公告文章
                <el-icon><Star /></el-icon>
              </div>
              <ul>
                <meau v-for="article in articles" :key="article.notice_id">
                  <div style="font-size: 20px;animation: fadeIn 2s ease-in-out;">
                    <router-link :to="{name:'NoticeDetails',params:{noticeId:article.notice_id} }" class="no-underline">
                      {{ article.notice_theme }}
                    </router-link>
                  </div>
                </meau>
              </ul>
            </div>
          </el-col>
        </el-row>
      </el-main>
      <el-divider>
        <div style="font-size: 20px;animation: fadeIn 2s ease-in-out;"><el-icon><Star /></el-icon>
          &nbsp;潮玩推荐&nbsp;
          <el-icon><Star /></el-icon></div>
      </el-divider>
    <!-- 展示随机的八个商品 -->
      <el-main>
        <el-col style="display: grid; grid-template-columns: repeat(4, 1fr);">
          <div v-for="goodsinfo in goods_item" :key="goodsinfo.goods_id">
            <div class="goods-item">
              <router-link :to="{name:'GoodsDetails',params:{goodsId:goodsinfo.goods_id,categoryId:goodsinfo.category_id} }">
              <img :src="'http://localhost:8080/image/upload/'+goodsinfo.goods_image" style="width: 80%;height: 80%;" >
              </router-link>
              <div>{{goodsinfo.goods_name}}&nbsp;&nbsp;{{goodsinfo.goods_price}}</div>
            </div>
          </div>
        </el-col>
      </el-main>
      <el-divider>
        <div style="font-size: 20px;animation: fadeIn 2s ease-in-out;"><el-icon><Star /></el-icon>
          &nbsp;IP故事&nbsp;
          <el-icon><Star /></el-icon></div>
      </el-divider>
      <br/>
      <el-footer class="text-center">
        <!-- 三个跳转链接到三个潮玩网站 -->
        <el-row>
          <el-col :span="8" center>
            <a href="https://www.popmart.com/hk" target="_blank">
              <img style="height: 200px;width: 350px"
                  src="https://prod-global-static.oss-us-east-1.aliyuncs.com/globalAdmin/1718242768784____pc-%E6%97%B6%E9%97%B4____.jpg?x-oss-process=image/format,webp"/>
            </a>
          </el-col>
          <el-col :span="8" center>
            <a href="https://www.toptoyglobal.com/" target="_blank">
              <img style="height: 200px;width: 350px"
                  src="https://www.toptoyglobal.com/upload/20221104/20221104162226.png"/>
            </a>
          </el-col>
          <el-col :span="8">
            <a href="https://www.52toys.com/" target="_blank">
              <img style="height: 200px;width: 450px"
                  src="https://www.52toys.com/uploadfile/ueditor/image/20230508/1683553069128722.jpg" />
            </a>
          </el-col>
        </el-row>
        <br/>
        <br/>
      </el-footer>

  </div>
</template>

<style>
.no-underline {
  text-decoration: none;
  color:#f89898;
  font-size:15px;

}
.goods-item{
  padding:20px;
  width: 80%;
  height: 80%;
  text-align: center;
}
.category-item{
  padding:0px;
  width: 100px;
  height: 100px;
  text-align: center;
}

.article{
  text-align: center;
}
.search-box-right {
  margin-bottom: 10px;
  text-align: center;
}
img {
  width: 100%;
  height: auto;
}
</style>